<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="app">
    <table>
        <thead>
        <tr>
            <th>名称</th>
            <th>数量</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in list" :key="item.id">
            <td>{{item.name}}</td>
            <td>{{item.count}}</td>
        </tr>
        </tbody>
    </table>
    <!--重复使用计算属性，它不会被调用多次(计算属性有缓存特性)，只有所依赖的数据发生变化了才重新求值-->
    <h1>礼物总数{{total}}</h1>
    <h1>礼物总数{{total}}</h1>
    <h1>礼物总数{{total}}</h1>
    <h1>礼物总数{{total}}</h1>
    <h1>礼物总数{{total}}</h1>
    <h1>礼物总数{{total}}</h1>

    <!--methods没有缓存特性。调用多少次就会执行多少次-->
    <p>{{getTotal()}}</p>
    <p>{{getTotal()}}</p>
    <p>{{getTotal()}}</p>
    <p>{{getTotal()}}</p>
    <p>{{getTotal()}}</p>
    <p>{{getTotal()}}</p>

</div>
<script src="../../javascript//vue.js"></script>
<script>

    const vm = new Vue({
        el: "#app",
        data() {
            return {
                list: [{id: 1, name: "篮球", count: 1}, {id: 2, name: "足球", count: 1}, {id: 3, name: "高尔夫", count: 1},]
            }
        },
        methods: {
            getTotal() {
                console.log("getTotal函数执行了")
                // 计算属性一般都要return一个结果，这个结果是基于现有的数据计算出来的
                return this.list.reduce((sum, item) => sum += item.count, 0)
            }
        },
        computed: {
            total() {
                console.log("total计算属性执行了")
                // 计算属性一般都要return一个结果，这个结果是基于现有的数据计算出来的
                return this.list.reduce((sum, item) => sum += item.count, 0)
            }
        }
    })
</script>
</body>

</html>